<!--<template>
  <div class="view_page applist">
    <el-card class="box-card">
      &lt;!&ndash;卡片头部&ndash;&gt;
      <div slot="header" class="clearfix">
        &lt;!&ndash;左侧&ndash;&gt;
        <div class="left">
          <div class="menu-title">
            应用列表
          </div>
        </div>
        <div class="right">
        <el-button type="primary" @click="openSave">新增应用</el-button>
        </div>
      </div>
      &lt;!&ndash;筛选&ndash;&gt;
      <div class="query-operate">
        <el-form class="demo-form-inline indoor-scene-buzhou-list-form" :inline="true"
                 :model="TESTFROMDATA" @submit.native.prevent>
          <el-form-item label="应用名称">
            <el-input clearable v-model="TESTFROMDATA.name" placeholder="请输入应用名称"
                      @keyup.native.enter="searchData()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData()" size="medium">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      &lt;!&ndash;卡片内容&ndash;&gt;
      &lt;!&ndash;列表&ndash;&gt;
      <el-table
        :data="datalist"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="privatekey"
          label="KEY"
          align="center">
        </el-table-column>
        <el-table-column
          prop="customer_version"
          label="版本号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="createtime"
          label="创建时间"
          align="center">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center">
          <template slot-scope="scope">
            <el-button @click="toSet(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="toDel(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      &lt;!&ndash;分页&ndash;&gt;
      <pagination :total="total"
                  :currentPage="pageNum"
                  :pageSize="size"
                  position="right"
                  @search="searchPagination">
      </pagination>
    </el-card>
  </div>
</template>

<script>
  import {Message} from 'element-ui'
  import pagination from '@/components/common/pagination/pagination'

  export default {
    components: {
      pagination,
    },
    data() {
      return {
        userInfo: JSON.parse(localStorage.getItem('loginPersonnelInformation')),
        // 模糊查询数据
        TESTFROMDATA: {
          name: ''
        },
        // 列表的数据
        datalist: [],
        pageNum: 1,
        page: 1,
        size: 10,
        total: 0,
      }
    },
    created() {
      var _this = this;
      _this.getAppList();
    },
    mounted() {
    },
    methods: {
      //查询应用列表
      getAppList() {
        var _this = this;
        var datas = {
          name: _this.TESTFROMDATA.name,
          page: _this.page,
          size: _this.size,
        };
        _this.$apis.getAppListPage(datas).then((res) => {
          if (res.code == 1) {
            _this.datalist = res.data.list;
            _this.total = res.data.totalRow;
            _this.pageNum = res.data.pageNumber;
            // 列表遮挡层关闭
            _this.$store.state.Site.listLoading = false;
          }
        });
      },
      //打开新增页面
      openSave(){
        var _this = this;
        _this.$router.push({
          path:"/admin/application/addApp"
        })
      },
      //打开编辑页面
      toSet(row){
        var _this = this;
        _this.$router.push({
          path:"/admin/application/setApp",
          query:row
        })
      },
      //删除
      toDel(row) {
        var _this = this;
        _this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用删除并且传递参数
          var datas = {
            id: row.id
          };
          _this.$apis.delApp(datas).then((res) => {
            if (res.code == 1) {
              Message.success(res.message);
              if (_this.page > 1 && _this.datalist.length <= 1) {
                _this.page = _this.page - 1;
              }
            } else {
              Message.error(res.message);
            }
            //查询列表
            _this.getAppList();
          });
        }).catch(() => {
        });
      },
      // 模糊查询
      searchData() {
        var _this = this;
        _this.page = 1;
        _this.getAppList();
      },
      //分页
      searchPagination(page) {
        var _this = this;
        _this.page = page;
        _this.getAppList();
      },
    },
  }
</script>

<style>
  .equipmentList .el-dialog__header {
    border-bottom: 1px solid #e3e3e3;
  }
</style>-->
<template>
  <div class="view_page userlist">
    <el-card class="box-card">
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <!--左侧-->
        <div class="left">
          <div class="menu-title">
            用户管理
          </div>
        </div>
        <div class="right">
          <el-button type="primary" @click="toSave">新增</el-button>
        </div>
      </div>
      <!--卡片内容-->
      <!--筛选-->
      <div class="query-operate">
        <el-form :inline="true" :model="TESTFROMDATA" class="demo-form-inline" @submit.native.prevent>
          <el-form-item label="用户名">
            <el-input clearable v-model="TESTFROMDATA.username" placeholder="用户名"
                      @keyup.native.enter="searchTeacherName()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchTeacherName()" size="medium">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--列表-->
      <el-table
        :data="datalist"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="role_name"
          label="角色"
          align="center"
          :formatter="formatRole">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.state==1?'success':'danger'">{{scope.row.state==1?'已启用':'已停用'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
          align="center">
          <template slot-scope="scope">
            <el-button @click="toEdit(scope.row)" type="text" size="small">编辑</el-button>
            <!--<el-button @click="toDel(scope.row)" type="text" size="small">删除</el-button>-->
            <el-button v-if="scope.row.state==0" @click="toSet(scope.row,1)" type="text" size="small">启用</el-button>
            <el-button v-if="scope.row.state==1" @click="toSet(scope.row,0)" type="text" size="small">停用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <pagination :total="total"
                  :currentPage="pageNum"
                  :pageSize="size"
                  position="right"
                  @search="searchPagination">
      </pagination>
    </el-card>
    <!--新增弹框-->
    <el-dialog
      title="新增用户"
      :visible.sync="addDialogVisible"
      width="50%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form :model="addFormData" label-width="100px">
        <el-form-item label="姓名">
          <el-input clearable v-model="addFormData.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input clearable v-model="addFormData.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          111111
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="addFormData.type" placeholder="请选择">
            <el-option
              v-for="item in addFormData.typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
    </el-dialog>
    <!--升级弹框-->
    <el-dialog
      title="编辑用户"
      :visible.sync="editDialogVisible"
      width="50%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form :model="editFormData" label-width="100px">
        <el-form-item label="姓名">
          <el-input clearable v-model="editFormData.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input clearable v-model="editFormData.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="editFormData.type" placeholder="请选择">
            <el-option
              v-for="item in editFormData.typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editQX">取 消</el-button>
    <el-button type="primary" @click="edit">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import {Message} from 'element-ui'
  import pagination from '@/components/common/pagination/pagination'

  export default {
    components: {
      pagination,
    },
    data() {
      return {
        userInfo: JSON.parse(localStorage.getItem('loginPersonnelInformation')),
        // 筛选内容
        TESTFROMDATA: {
          username: ""
        },
        // 列表的数据
        datalist: [],
        pageNum: 1,
        page: 1,
        size: 10,
        total: 0,
        addDialogVisible: false,
        addFormData: {
          name: "",
          username: "",
          type: 2,
          typeList: [
            {label: "管理员", value: 1},
            {label: "普通用户", value: 2},
          ]
        },
        editDialogVisible: false,
        detailDialogVisible: false,
        editFormData: {
          name: "",
          username: "",
          type: 2,
          typeList: [
            {label: "管理员", value: 1},
            {label: "普通用户", value: 2},
          ]
        },
      }
    },
    created() {
      this.getUserList();
    },
    mounted() {
    },
    methods: {
      //格式化角色
      formatRole(data){
        return data.role_name=="admin"?"管理员":"普通用户";
      },
      //查询列表
      getUserList() {
        var datas = {
          page: this.page,
          size: this.size,
          username: this.TESTFROMDATA.username,
          state: -1,
        };
        this.$apis.getUserListPage(datas).then((res) => {
          if (res.code == 1) {
            this.datalist = res.data.list;
            this.total = res.data.totalRow;
            this.pageNum = res.data.pageNumber;
            // 列表遮挡层关闭
            this.$store.state.Site.listLoading = false;
          }
        });
      },

      //删除
      toDel(row) {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用删除并且传递参数
          var datas = {
            username: row.username,
            state: 0,//停用
          };
          this.$apis.stopUser(datas).then((res) => {
            if (res.code == 1) {
              Message.success(res.message);
              if (this.page > 1 && this.datalist.length <= 1) {
                this.page = this.page - 1;
              }
            } else {
              Message.error(res.message);
            }
            //查询列表
            this.getUserList();
          });
        }).catch(() => {
        });
      },
      //启用/停用
      toSet(row,state){
        var msg="";
        if(state==1){
          msg="启用";
        }
        if(state==0){
          msg="停用";
        }
        this.$confirm('确定要'+msg+'此用户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用删除并且传递参数
          var datas = {
            uid: row.id,
            state: state,//停用
          };
          this.$apis.setUser(datas).then((res) => {
            if (res.code == 1) {
              Message.success(res.message);
              if (this.page > 1 && this.datalist.length <= 1) {
                this.page = this.page - 1;
              }
            } else {
              Message.error(res.message);
            }
            //查询列表
            this.getUserList();
          });
        }).catch(() => {
        });
      },
      //打开新增
      toSave() {
        this.addDialogVisible = true;
        this.addFormData.name = "";
        this.addFormData.username = "";
      },
      //保存
      save() {
        var formData = this.addFormData;
        if (formData.name == "" || formData.name == undefined) {
          Message.warning('姓名不能为空');
          return;
        }
        if (formData.username == "" || formData.username == undefined) {
          Message.warning('用户名不能为空');
          return;
        }
        var datas = {
          name: formData.name,
          username: formData.username,
          type: formData.type,
        };
        this.$apis.addUser(datas).then((res) => {
          if (res.code == 1) {
            Message.success(res.message);
            this.addDialogVisible = false;
            this.getUserList();
          } else {
            Message.error(res.message);
          }
        });
      },
      // 打开编辑页面
      toEdit(row) {
        var datas = {
          uid: row.id
        };
        this.$apis.getUserById(datas).then((res) => {
          if (res.code == 1) {
            this.editFormData.name = res.data.name;
            this.editFormData.username = res.data.username;
            if (res.data.role_name == "admin") {
              this.editFormData.type = 1
            }
            if (res.data.role_name == "user") {
              this.editFormData.type = 2
            }

            this.editDialogVisible = true;
          }
        });
      },
      // 修改
      edit() {
        var formData = this.editFormData;
        if (formData.name == "" || formData.name == undefined) {
          Message.warning('姓名不能为空');
          return;
        }
        if (formData.username == "" || formData.username == undefined) {
          Message.warning('用户名不能为空');
          return;
        }
        var datas = {
          name: formData.name,
          username: formData.username,
          type: formData.type,
        };
        this.$apis.setUser(datas).then((res) => {
          if (res.code == 1) {
            Message.success(res.message);
            this.editDialogVisible = false;
            this.getUserList();
          } else {
            Message.error(res.message);
          }
        });
      },
      //取消编辑
      editQX() {
        this.editDialogVisible = false;
        this.getUserList();
      },

      //模糊查询
      searchTeacherName() {
        this.page = 1;
        this.getUserList();
      },
      //分页
      searchPagination(page) {
        this.page = page;
        this.getUserList();
      },
    },
  }
</script>

<style lang="scss">

</style>

